<!--
 * @Author: Bennty
 * @Date: 2024-12-06 17:15:49
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-12-19 16:27:31
 * @Description: 请填写简介
-->
<template>
    <div class="p-2">
        <transition
            :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave"
        >
            <div class="search">
                <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                    <el-form-item label="选择日期" prop="timeRange">
                        <el-date-picker 
                            type="daterange"
                            v-model="queryParams.timeRange"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :shortcuts="shortcuts"
                            format="YYYY-MM-DD"
                            :value-format="'YYYY-MM-DD'"
                        />
                    </el-form-item>
                    <el-form-item label="审核状态" prop="approvalStatus">
                        <el-select v-model="queryParams.approvalStatus" clearable placeholder="请选择">
                            <el-option value="0" label="未审核"></el-option>
                            <el-option value="1" label="销售审核"></el-option>
                            <el-option value="2" label="销售审核中"></el-option>
                            <el-option value="3" label="财务审核中"></el-option>
                            <el-option value="4" label="财务审核完成"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设计状态" prop="designStatus">
                        <el-select v-model="queryParams.designStatus" clearable placeholder="请选择">
                            <el-option value="0" label="未接单"></el-option>
                            <el-option value="1" label="已接单未定稿"></el-option>
                            <el-option value="2" label="已接单已定稿"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="发货" prop="deliveryStatus">
                        <el-select v-model="queryParams.deliveryStatus" clearable placeholder="请选择">
                            <el-option value="0" label="未发货"></el-option>
                            <el-option value="1" label="已发货"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="入库" prop="inStatus">
                        <el-select v-model="queryParams.inStatus" clearable placeholder="请选择">
                            <el-option value="0" label="未入库"></el-option>
                            <el-option value="1" label="部分入库"></el-option>
                            <el-option value="2" label="已入库"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="订单类别" prop="productType">
                        <el-select v-model="queryParams.productType" clearable placeholder="请选择">
                            <el-option v-for="item in customized_order_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="模糊搜索" prop="saleOrderCode">
                        <el-input v-model="queryParams.orderId" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </transition>
        <el-card shadow="never">
            <template #header>
                <el-row :gutter="8" class="mb8">
                    <el-col class="header-button-container" :span="1.5">
                        <el-button type="success" plain icon="Plus" @click="handleClickAdd">下单</el-button>
                    </el-col>
                </el-row>
            </template>
            <el-table :data="customizedOrderList"  v-loading="loading">
                <el-table-column label="产品类型" align="center">
                    <template #default="scope">
                        <span>{{ customized_order_type.filter((item:any)=>scope.row.productType == item.value)[0]?.label }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="制单员" prop="createByName" align="center"></el-table-column>
                <el-table-column label="制单日期" prop="createTime" align="center"></el-table-column>
                <el-table-column label="交货日期" prop="deliveryDate" align="center"></el-table-column>
                <el-table-column label="销售单号" prop="saleOrderCode" align="center"></el-table-column>
                <el-table-column label="订单编号" prop="orderId" align="center"></el-table-column>
                <el-table-column label="客户名称" align="center">
                    <template #default="scope">
                        <span>{{ customers?.filter((item:any)=>scope.row.customerId == item.id)[0]?.createByName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="产品款式" align="center">
                    <template #default="scope">
                        <el-button type="primary" link @click="handleClickCheckInventory(scope.row)">{{ customization_indent_tableware?.filter((item:any)=>scope.row.productStyle == item.value)[0]?.label }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="地址详情" align="center">
                    <template #default="scope">
                        <el-button type="primary" link @click="handleClickAddressInfo(scope.row)">查看地址</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="订单数量" prop="number" align="center"></el-table-column>
                <el-table-column label="单价" prop="price" align="center"></el-table-column>
                <el-table-column label="订单金额" align="center">
                    <template #default="scope">
                        {{ scope.row.number * scope.row.price }}
                    </template>
                </el-table-column>
                <el-table-column label="设计师" align="center">
                    <template #default="scope">
                        <span v-if="scope.row.designStatus == '0'" class="alert">未接单</span>
                        <span v-else class="warning">郭真</span>
                    </template>
                </el-table-column>
                <el-table-column label="工单打印" align="center">
                    <template #default="scope">
                        <span v-if="scope.row.printDate">{{ scope.row.printDate }}</span>
                        <el-button v-else type="danger" link @click="handleClickCheckDetails(scope.row)">未打印</el-button>
                        <!-- <span v-else class="warning">郭真</span> -->
                    </template>
                </el-table-column>
                <el-table-column label="入库" align="center" width="130px">
                    <template #default="scope">
                        <span v-if="scope.row.inStatus == '0'" class="alert">未入库</span>
                        <span v-else-if="scope.row.inStatus == '1'" class="warning">部分入库</span>
                        <span v-else-if="scope.row.inStatus == '2'" class="primary">已入库</span>
                        <span v-else-if="scope.row.inStatus == '3'" class="purple">超期未完成</span>
                    </template>
                </el-table-column>
                <el-table-column label="审核" align="center">
                    <template #default="scope">
                        <el-button link v-if="scope.row.approvalStatus == '0'" type="danger" @click="handleClickSalerExamine(scope.row)">未审核</el-button>
                        <el-button link v-else-if="scope.row.approvalStatus == '1'" type="primary" @click="handleClickSalerExamine(scope.row)">销售审核中</el-button>
                        <el-button v-else-if="scope.row.approvalStatus == '2'" link type="success" @click="handleClickFinanceExamine(scope.row)">销售审核完成</el-button>
                        <span v-else-if="scope.row.approvalStatus == '3'">财务审核中</span>
                        <span v-else-if="scope.row.approvalStatus == '4'" class="success">财务审核完成</span>
                    </template>
                </el-table-column>
                <el-table-column label="加急审核" align="center" width="80px">
                    <template #default="scope">
                        <el-button v-if="scope.row.urgentStatus == '0'" type="primary" link  @click="handleClickApplyUrgent(scope.row)">未申请</el-button>
                        <span v-else-if="scope.row.urgentStatus == '1'" class="warning">申请中</span>
                        <span v-else-if="scope.row.urgentStatus == '2'" class="normal">已通过</span>
                        <span v-else-if="scope.row.urgentStatus == '3'" class="alert">已拒绝</span>
                    </template>
                </el-table-column>
                <el-table-column label="发货状态" align="center">
                    <template #default="scope">
                        <span v-if="scope.row.deliveryStatus == '0'" class="alert">未发货</span>
                        <span v-else-if="scope.row.deliveryStatus == '1'" class="primary">已发货</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="155px">
                    <template #default="scope">
                        <el-tooltip content="编辑" placement="top">
                            <el-button link :style="{fontSize:'15px'}" icon="Edit" type="primary" @click="handleClickEdit(scope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button link :style="{fontSize:'15px'}" icon="Delete" type="danger" @click="handleClickDelete(scope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip content="发货" placement="top">
                            <el-button link :style="{fontSize:'15px', color:'#B886F8'}" icon="Van" @click="handleClickDeliver(scope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip content="生成采购单" placement="top">
                            <el-button link :style="{fontSize:'15px'}" icon="Goods" type="success"></el-button>
                        </el-tooltip>
                        <el-tooltip content="同步" placement="top">
                            <el-button link :style="{fontSize:'15px',margin:'0'}" icon="Sort" type="primary"></el-button>
                        </el-tooltip>
                        <el-tooltip content="再次下单" placement="top">
                            <el-button link :style="{fontSize:'15px'}" icon="VideoPlay" type="warning"></el-button>
                        </el-tooltip>
                        <el-tooltip content="加急审核" placement="top">
                            <el-button link :style="{fontSize:'15px'}" icon="QuartzWatch" type="danger" @click="handleClickExamineUrgent(scope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip content="工费录入" placement="top">
                            <el-button link :style="{fontSize:'15px'}" icon="Document" type="success"></el-button>
                        </el-tooltip>
                        <el-tooltip content="领料申请" placement="top">
                            <el-button link :style="{fontSize:'15px',color:'#B886F8',margin:'0'}" @click="handleClickApplyIngredients(scope.row)" icon="Memo"></el-button>
                        </el-tooltip>
                        <el-tooltip content="成本分析" placement="top">
                            <el-button link :style="{fontSize:'15px'}" icon="Coin" type="primary" @click="handleClickCostAnalysis(scope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip content="撤销审核" placement="top">
                            <el-button link :style="{fontSize:'15px'}" icon="Back" type="warning"></el-button>
                        </el-tooltip>
                        <el-tooltip content="申请加急" placement="top">
                            <el-button link :style="{fontSize:'15px'}" icon="ArrowUpBold" type="danger" @click="handleClickApplyUrgent(scope.row)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="totalData > 0" :total="totalData" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                @pagination="getCustomizedOrderList" />
        </el-card>
        <el-dialog v-model="selectOrderTypeVisible" title="选择订单类别" width="40%" @close="handleCloseAdd" destory-on-close>
            <el-row :gutter="30">
                <el-col :span="12" class="order-type" v-for="item in customized_order_type" :key="item.value">
                    <div class="type-info" @click="handleSelectType(item)">
                        <span class="type-label">
                            {{ item.label }}
                        </span>
                        <span class="type-value">
                            {{ item.value }}
                        </span>
                    </div>
                </el-col>
            </el-row>
        </el-dialog>
        <deliver :visible="deliverVisible" :send_type="send_type" :orderDetails="orderDetails" @close="handleCloseDeliver" />
        <orderDetail :visible="checkOrderDetailVisible" :customization_indent_tableware="customization_indent_tableware" :customers="customers" :orderDetails="orderDetails" @close="handleCloseCheck" />
        <costAnalysis :visible="costAnalysisVisible" :costAnalysisDatile="costAnalysisDatile" :customization_indent_tableware="customization_indent_tableware" @close="handleCloseAnalysis" />
        <salerExamine :visible="salerExamineVisible" :orderDetails="orderDetails" :customers="customers" :pay_type="pay_type" @close="handleCloseSalerExamine" @submit="handleSubmit" />
        <financeExamine :visible="financeExamineVisible" :orderDetails="orderDetails" :customers="customers" :pay_type="pay_type" @close="handleCloseFinanceExamine" @submit="handleSubmit"/>
        <applyUrgent :visible="applyUrgentVisible" :orderDetails="orderDetails" @close="handleCloseApplyUrgent" @submit="handleSubmit" />
        <examineUrgent :visible="examineUrgentVisible" :orderDetails="orderDetails" @close="handleCloseExamineUrgent" @submit="handleSubmit"/>
        <applyIngredients :visible="applyIngredientsVisible" :orderDetails="orderDetails" :customers="customers" @close="handleCloseApplyIngredients" @submit="handleSubmit" />
        <checkInventory :visible="checkInventoryVisible" :orderDetails="orderDetails" :customers="customers" :customized_order_type="customized_order_type" @close="handleCloseCheckInventory" />
        <addressInfo :visible="checkAddressInfo" :orderDetails="orderDetails" :customized_order_type="customized_order_type" @close="handleCloseAddressInfo" />
    </div>
</template>

<script setup lang="ts">
import { type FormInstance } from 'element-plus';
import { QueryOrderType, CustomizedOrderVO } from '@/api/sj/productManagement/customizedOrder/types';
import useCustomerStore from '@/store/modules/customers';
import { getCustomizedOrderListApi ,getCustomizedOrderDetailApi ,deleteCustomizedOrderDetailApi,costAnalysisApi } from '@/api/sj/productManagement/customizedOrder/index';
import deliver from './components/deliver.vue';
import orderDetail from './components/orderDetail.vue';
import costAnalysis from './components/costAnalysis.vue';
import salerExamine from './components/salerExamine.vue';
import financeExamine from './components/financeExamine.vue';
import applyUrgent from './components/applyUrgent.vue';
import examineUrgent from './components/examineUrgent.vue';
import applyIngredients from './components/applyIngredients.vue';
import checkInventory from './components/checkInventory.vue';
import addressInfo from './components/addressInfo.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { customized_order_type,customization_indent_tableware,send_type, pay_type } = toRefs<any>(proxy?.useDict('customized_order_type','customization_indent_tableware','send_type', 'pay_type'));
const router = useRouter();
const queryFormRef = ref<FormInstance>();
const shortcuts = [
    {
        text: 'Last week',
        value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        return [start, end]
        },
    },
    {
        text: 'Last month',
        value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        return [start, end]
        },
    },
    {
        text: 'Last 3 months',
        value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
        return [start, end]
        },
    },
];
const { getCustomerData } = useCustomerStore();
const { customerList } = toRefs(useCustomerStore());
const customers = ref<any[]>([]);

watch(()=>customerList.value, (newData)=>{
    customers.value = newData;
})

const data = reactive<pageDataOnlyQuery< QueryOrderType>>({
    queryParams:{
        pageNum: 1,
        pageSize: 30,
        approvalStatus: undefined,
        designStatus: undefined,
        deliveryStatus: undefined,
        inStatus: undefined,
        productType: undefined,
        orderId: undefined,
        timeRange: []
    }
});
const { queryParams } = toRefs(data);

const loading = ref(false);
const customizedOrderList = ref<CustomizedOrderVO[]>([]);
const totalData = ref(0);
const selectOrderTypeVisible = ref(false);
const orderDetails = ref<any>({});
const deliverVisible = ref(false);
const checkOrderDetailVisible = ref(false);
const costAnalysisVisible = ref(false);
const costAnalysisDatile = ref<any>();
const salerExamineVisible = ref(false);
const financeExamineVisible = ref(false);
const applyUrgentVisible = ref(false);
const examineUrgentVisible = ref(false);
const applyIngredientsVisible = ref(false);
const checkInventoryVisible = ref(false);
const checkAddressInfo = ref(false);

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getCustomizedOrderList();
};

const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};

const getCustomizedOrderList = async () => {
    loading.value = true;
    let result;
    if(queryParams.value?.timeRange && queryParams.value?.timeRange?.length > 0){
        const submitData = {
            ...queryParams.value,
            startDate: queryParams.value?.timeRange[0],
            endDate: queryParams.value?.timeRange[1]
        };
        result = await getCustomizedOrderListApi(submitData);
    }else{
        const submitData = {
            ...queryParams.value,
            startDate: undefined,
            endDate: undefined
        };
        result = await getCustomizedOrderListApi(submitData);
    };
    if(result.code == 200){
        //@ts-ignore
        totalData.value = result.data.dataPage.total;
        //@ts-ignore
        customizedOrderList.value = result.data.dataPage.records;
        loading.value = false;
    }
};

const handleClickAdd = () => {
    selectOrderTypeVisible.value = true;
};

const handleCloseAdd = () => {
    selectOrderTypeVisible.value = false;
};

const handleSelectType = (item: any) => {
    router.push(`/produceManagement/addCustomizedOrder/${item.value}`);
};

const handleClickEdit = (order: CustomizedOrderVO) => {
    router.push(`editCustomizedOrder/addOrderDetails/${order.id}`);
};

/** 提交成功 */
const handleSubmit = (result: boolean) => {
    if(result){
        proxy?.$modal.msgSuccess('成功');
        getCustomizedOrderList();
    };
};

/** 删除订单 */
const handleClickDelete = async (order: CustomizedOrderVO) => {
    await proxy?.$modal.confirm('确认要将此条订单消息放入回收站么');
    const { code } = await deleteCustomizedOrderDetailApi(order.id);
    if(code == 200){
        proxy?.$modal.msgSuccess('放入回收站成功');
        getCustomizedOrderList();
    }
};

/** 发货 */
const handleClickDeliver = async (order: CustomizedOrderVO) => {
    const {code, data} = await getCustomizedOrderDetailApi(order.id);
    if(code == 200){
        orderDetails.value = data;
        deliverVisible.value = true;
    };
};

const handleCloseDeliver = () => {
    deliverVisible.value = false;
};

/** 查看订单详情 */
const handleClickCheckDetails = async (order: CustomizedOrderVO) => {
    const {code, data} = await getCustomizedOrderDetailApi(order.id);
    if(code == 200){
        orderDetails.value = data;
        checkOrderDetailVisible.value = true;
    };
};

const handleCloseCheck = () => {
    checkOrderDetailVisible.value = false;
};

/** 成本分析 */
const handleClickCostAnalysis = async (order: CustomizedOrderVO) => {
    
    const {code, data} = await costAnalysisApi(order.id);
    if(code == 200){
        costAnalysisDatile.value = data;
        costAnalysisVisible.value = true;
    };
};

const handleCloseAnalysis = () => {
    costAnalysisVisible.value = false;
};

/** 销售审核 */
const handleClickSalerExamine = async (order: CustomizedOrderVO) => {
    const {code, data} = await getCustomizedOrderDetailApi(order.id);
    if(code == 200){
        orderDetails.value = data;
        salerExamineVisible.value = true;
    };
};

const handleCloseSalerExamine = () => {
    salerExamineVisible.value = false;
};

/** 财务审核 */
const handleClickFinanceExamine = async (order: CustomizedOrderVO) => {
    const {code, data} = await getCustomizedOrderDetailApi(order.id);
    if(code == 200){
        orderDetails.value = data;
        financeExamineVisible.value = true;
    };
};

const handleCloseFinanceExamine = () => {
    financeExamineVisible.value = false;
};

/** 申请加急 */
const handleClickApplyUrgent = async (order: CustomizedOrderVO) => {
    if(order.urgentStatus == '0'){
        const {code, data} = await getCustomizedOrderDetailApi(order.id);
        if(code == 200){
            orderDetails.value = data;
            applyUrgentVisible.value = true;
        };
    }else{
        proxy?.$modal.msgError('该订单已申请加急')
    };
};

const handleCloseApplyUrgent = () => {
    applyUrgentVisible.value = false;
};

/** 审核加急 */
const handleClickExamineUrgent = async (order: CustomizedOrderVO) => {
    if(order.urgentStatus == '1'){
        const {code, data} = await getCustomizedOrderDetailApi(order.id);
        if(code == 200){
            orderDetails.value = data;
            examineUrgentVisible.value = true;
        };
    }else if(order.urgentStatus == '0'){
        proxy?.$modal.msgError('该订单未审核加急');
    }else{
        proxy?.$modal.msgError('该订单加急已审核');
    };
};

const handleCloseExamineUrgent = () => {
    examineUrgentVisible.value = false;
};

/** 配料申请 */
const handleClickApplyIngredients = async (order: CustomizedOrderVO) => {
    const {code, data} = await getCustomizedOrderDetailApi(order.id);
    if(code == 200){
        orderDetails.value = data;
        applyIngredientsVisible.value = true;
    };
};

const handleCloseApplyIngredients = () => {
    applyIngredientsVisible.value = false;
};

/** 查看库存 */
const handleClickCheckInventory = async (order: CustomizedOrderVO) => {
    const {code, data} = await getCustomizedOrderDetailApi(order.id);
    if(code == 200){
        orderDetails.value = data;
        checkInventoryVisible.value = true;
    };
};

const handleCloseCheckInventory = () => {
    checkInventoryVisible.value = false;
};

/** 点击查看地址信息 */
const handleClickAddressInfo = async (order: CustomizedOrderVO) => {
    const {code, data} = await getCustomizedOrderDetailApi(order.id);
    if(code == 200){
        orderDetails.value = data;
        checkAddressInfo.value = true;
    };
};

const handleCloseAddressInfo = () => {
    checkAddressInfo.value = false;
};

onMounted(()=>{
    getCustomerData();
    getCustomizedOrderList();
});
</script>

<style lang="scss" scoped>
$color: rgba(157,191,227,1);
@mixin type-style{
    width: 100%;
    text-align: center;
    line-height: 1;
    display: block;
    cursor: pointer;
}
.order-type{
    color: $color;
    min-height: 15rem;
    .type-info{
        border: solid 1px $color;
        border-radius: 15px;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .type-label{
        font-size: 20px;
        @include type-style;
        
    };
    .type-value{
        font-size: 18px;
        margin-top: 10px;
        @include type-style;
    };
}
</style>